import React, {useState, useEffect} from 'react';
import {View, Text, TouchableOpacity, TextInput} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import {Icon, Toast} from '@ant-design/react-native';
import styles from '../Register/style';
import {sendMsg, mretrievePwd} from '../../service/login';

let count = 60;

const FindPswd = () => {
  const navigation = useNavigation();
  const [passWd, setPassWd] = useState(0); // 是否激活发送按钮
  const [phone, onChangePhone] = useState('');
  const [smsCode, onChangeSmsCode] = useState('');
  const [password, onChangeTextPassword] = useState('');
  const [secureText, setSecureText] = useState(true);
  const [countDown, setCountDown] = useState(60);

  useEffect(() => {
    navigation.addListener('focus', () => {
      count = 60;
    });
  }, [navigation]);

  // 发送倒计时
  const timer = () => {
    let _timer = setInterval(()=>{
      --count;
      if(count>0){
        setCountDown(count);
      }else{
        setPassWd(0);
        count = 60;
        setCountDown(count);
        clearInterval(_timer);
      }
    }, 1000);
  };

  const sendMsgRequest= () => {
    sendMsg({phone}).then(res => {
      // console.log(res);
      if(res.code===200){
        Toast.success('发送成功', 1);
      }else{
        Toast.success(res.msg, 1);
      }
    });
  };

  // 找回密码
  const sendMretrievePwd = () => {
    mretrievePwd({phone, password, smsCode}).then(res => {
      console.log(res);
      if(res.code===200){
        Toast.success('密码找回成功，跳转登录页...', 1);
        setTimeout(() => {
          // navigation.replace('Login');
          navigation.goBack();
        }, 1000);
      }else{
        Toast.success(res.msg, 1);
      }
    });
  };

  return (
    <AreaView>
      <View style={[styles.input_container, styles.top]}>
        <Text style={styles.font_color}>+86 | </Text>
        <TextInput keyboardType="numeric" style={styles.input} placeholder="请输入手机号" value={phone}
            onChangeText={text => onChangePhone(text)}/>
      </View>
      <View style={styles.input_container}>
          <TextInput style={styles.input} placeholder="请输入验证码" value={smsCode}
            onChangeText={text => onChangeSmsCode(text)}
          />
          <TouchableOpacity  activeOpacity={1} style={styles.send_msg}
            onPress = {() => {
              if(passWd===0){
                if(phone){
                  setPassWd(1);
                  timer();
                  sendMsgRequest();
                }else{
                  Toast.fail('请输入手机号码');
                }
              }
            }}
          >
            {passWd>0 ? (
              <Text style={styles.send_msg_text}>{countDown}</Text>
            ) : (
              <Text style={styles.send_msg_text_origin }>获取验证码</Text>
            )}
          </TouchableOpacity>
        </View>
      <View style={styles.input_container}>
        <Icon name="lock" style={styles.passwd_clock} />
        <TextInput style={styles.input} placeholder="请设置6-20位的登录密码" value={password} 
          secureTextEntry={secureText}
          onChangeText={text => onChangeTextPassword(text)}
        />
        <TouchableOpacity
            onPress={() => {
              setSecureText(!secureText);
            }}
          >
            <Icon name={secureText ? "eye" : "eye-invisible"} style={styles.passwd_clock} />
          </TouchableOpacity>
      </View>
      <View style={styles.btn_container}>
        <TouchableOpacity  activeOpacity={1} style={styles.btn}
          onPress={() => {
            sendMretrievePwd();
          }}
        >
          <Text style={styles.btn_text}>确认找回密码</Text>
        </TouchableOpacity>
      </View>
    </AreaView>
  );
};

export default FindPswd;
